<!-- 首页 -->
<template>
  <div class="home-container">

    <el-row :gutter="15" class="home-card-one mb15">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class=" flex">
          <div class="flex-margin flex w100" :class="` home-one-animation0`">
            <card1></card1>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class=" flex">
          <div class="flex-margin flex w100" :class="` home-one-animation1`">
            <card2></card2>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class=" flex">
          <div class="flex-margin flex w100" :class="` home-one-animation2`">
            <card3></card3>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="flex">
          <div class="flex-margin flex w100" :class="` home-one-animation3`">
            <card4></card4>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="15" class="home-card-two mb15">
      <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
        <div style="padding: 20px" class="home-card-item">
          <div style="height: 100%" ref="homeLineRef"></div>
        </div>

        <div style="margin-top: 20px; padding: 20px" class="home-card-item">
          <div style="height: 100%" ref="homeBarRef"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media ">
        <card5 style='height:100%'></card5>
      </el-col>
    </el-row>



    <el-dialog
    class='upgrade-dialog'
			v-model="dioNotices"
			width="35%"
      title='新增项目通知'
			destroy-on-close
			:close-on-click-modal="false"
			
		>
    <svg class="icon" style="top: -31px;
    right: -22px;
    transform: rotate(22deg); width:100px;height:100px; position:absolute;vertical-align: middle; fill: currentcolor; overflow: hidden; --darkreader-inline-fill: currentcolor;" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3183" data-darkreader-inline-fill=""><path d="M884.394667 259.618133h-84.855467V617.130667c0 18.1248-18.193067 36.317867-36.352 36.317866h-327.168l-6.0416 6.075734v54.510933h230.229333c6.075733 0 6.075733 0 12.151467 6.007467L805.7856 853.333333v-121.1392c0-6.0416 5.9392-18.158933 18.090667-18.158933h54.545066c18.158933 0 30.242133-12.151467 30.242134-30.276267V295.936c6.007467-18.193067-6.109867-36.317867-24.302934-36.317867z" fill="#C41818" p-id="3184" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dd4444;"></path><path d="M740.932267 170.666667H195.618133c-18.158933 0-36.317867 12.151467-36.317866 30.3104v393.8304c0 18.1248 12.117333 30.242133 30.242133 30.242133h54.5792c6.0416 0 18.090667 6.007467 18.090667 18.193067v121.173333l133.358933-133.358933s6.0416-6.007467 12.117333-6.007467h333.243734c18.193067 0 30.276267-12.1856 30.276266-30.242133V200.977067c0-18.158933-12.0832-30.3104-30.276266-30.3104zM334.9504 437.248a41.301333 41.301333 0 0 1-42.3936-42.427733c0-24.234667 18.193067-36.386133 42.3936-36.386134 24.2688 0 36.420267 18.1248 36.420267 36.386134 6.0416 24.234667-12.151467 42.427733-36.420267 42.427733z m133.358933 0a41.506133 41.506133 0 0 1-42.427733-42.427733c0-24.234667 18.2272-36.386133 42.427733-36.386134 24.200533 0 42.359467 18.1248 42.359467 36.386134a41.403733 41.403733 0 0 1-42.359467 42.427733z m133.3248 0c-24.302933 0-42.496-18.193067-42.496-36.386133 0-24.234667 18.193067-42.359467 36.386134-42.359467 24.234667 0 42.427733 18.1248 42.427733 36.352-0.068267 18.158933-18.193067 42.3936-36.317867 42.3936z" fill="#C41818" p-id="3185" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dd4444;"></path></svg>
    <el-table
     size='small'
    :data="dioNoticesData"
    class="notice_table"
    :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
 
    :highlight-current-row="true"
    :max-height="400"
  
    >
    <el-table-column
            show-overflow-tooltip
            type="index"
            width="80"
            label="序号"
            align="center"
          />
          <el-table-column
         
            width="100"
            show-overflow-tooltip
            label="项目代号"
            prop="proj_no"
          ></el-table-column>
          <el-table-column
           
            min-width="150"
            show-overflow-tooltip
            label="项目名称"
            prop="proj_name"
          >
     

        </el-table-column>
          <el-table-column
            width="120"
            label="专业负责人"
            show-overflow-tooltip
            prop="professional_leader"
          >
        
            <template #default="scope">
              <el-tag
                style="margin-right: 5px"
                v-if="scope.row.professional_leader&&scope.row.professional_leader.length > 0"
             
                
                size="small"
                class="ml-2"
                type="success"
              >
                {{ scope.row.professional_leader || "未指定" }}
              </el-tag>
              <el-tag v-else size="small" class="ml-2" type="danger">
                未指定
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            label="责任组长"
            show-overflow-tooltip
            prop="team_leader"
          >

        

            <template #default="scope">
              <el-tag
                style="margin-right: 5px"
                v-if="scope.row.team_leader&&scope.row.team_leader.length > 0"
                size="small"
                class="ml-2"
                type="success"
              >
                {{ scope.row.team_leader || "未指定" }}
              </el-tag>
              <el-tag v-else size="small" class="ml-2" type="danger">
                未指定
              </el-tag>
            </template>
          </el-table-column>
        
          <el-table-column
            label="设计阶段"
            show-overflow-tooltip
            prop="design_stage"
          ></el-table-column>

    </el-table>
		
		
			<div style="display: flex; justify-content: flex-end;width:100%" class="upgrade-btn">
				<el-button  size="small" type="success" round  @click="read_is">已读</el-button>
				<el-button  size="small" type="danger" round @click="dioNotices = false">取消</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script setup name="home">
import {
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  markRaw,
  defineAsyncComponent,
} from "vue";
import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
import { useTagsViewRoutes } from "/@/stores/tagsViewRoutes";
import card1 from "./components/card_departmentalDocuments.vue";
import card2 from "./components/card_technicalData.vue";
import card3 from "./components/card_buildingMaterials.vue";
import card4 from "./components/card_overseasInformation.vue";

import card5 from "./components/card_safetyDesignManagement.vue";
import { GetUnfinishedWorkDatas ,GetEquipmentCountForState,GetNewProjiectNoticeState,ModifyNewProjectNoticeState} from "../../api/project";
// 定义变量内容
const homeLineRef = ref();
const homePieRef = ref();
const homeBarRef = ref();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
  global: {
    homeChartOne: null,
    homeChartTwo: null,
    homeCharThree: null,
    dispose: [null, "", undefined],
  },
  homeOne: [
    {
      num1: "125,12",
      num2: "-12.32",
      num3: "订单统计信息",
      num4: "fa fa-meetup",
      color1: "#FF6462",
      color2: "--next-color-primary-lighter",
      color3: "--el-color-primary",
    },
    {
      num1: "653,33",
      num2: "+42.32",
      num3: "月度计划信息",
      num4: "iconfont icon-ditu",
      color1: "#6690F9",
      color2: "--next-color-success-lighter",
      color3: "--el-color-success",
    },
    {
      num1: "125,65",
      num2: "+17.32",
      num3: "年度计划信息",
      num4: "iconfont icon-zaosheng",
      color1: "#6690F9",
      color2: "--next-color-warning-lighter",
      color3: "--el-color-warning",
    },
    {
      num1: "520,43",
      num2: "-10.01",
      num3: "访问统计信息",
      num4: "fa fa-github-alt",
      color1: "#FF6462",
      color2: "--next-color-danger-lighter",
      color3: "--el-color-danger",
    },
  ],
  homeThree: [
    {
      icon: "iconfont icon-yangan",
      label: "浅粉红",
      value: "2.1%OBS/M",
      iconColor: "#F72B3F",
    },
    {
      icon: "iconfont icon-wendu",
      label: "深红(猩红)",
      value: "30℃",
      iconColor: "#91BFF8",
    },
    {
      icon: "iconfont icon-shidu",
      label: "淡紫红",
      value: "57%RH",
      iconColor: "#88D565",
    },
    {
      icon: "iconfont icon-shidu",
      label: "弱紫罗兰红",
      value: "107w",
      iconColor: "#88D565",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "中紫罗兰红",
      value: "57DB",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "紫罗兰",
      value: "57PV",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "暗紫罗兰",
      value: "517Cpd",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "幽灵白",
      value: "12kg",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "海军蓝",
      value: "64fm",
      iconColor: "#FBD4A0",
    },
  ],
  myCharts: [],
  charts: {
    theme: "",
    bgColor: "",
    color: "#303133",
  },
});


let optionsR = ref({
    backgroundColor: state.charts.bgColor,
    title: {
      text: "人力负荷状态",
      x: "left",
      textStyle: { fontSize: "15", color: state.charts.color },
    },
    grid: { top: 70, right: 20, bottom: 30, left: 30 },
    tooltip: { trigger: "axis" },
    legend: { data: ["设计中", "校核中","已完成"], right: 0 },
    xAxis: {
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: [
      {
        type: "value",
        name: "数量",
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "#f5f5f5" },
        },
      },
    ],
    series: [
      {
        name: "设计中",
        type: "line",
        symbolSize: 6,
        symbol: "circle",
        smooth: true,
        data: [
          0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10,
        ],
        lineStyle: { color: "#fe9a8b" },
        itemStyle: { color: "#fe9a8b", borderColor: "#fe9a8b" },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#fe9a8bb3" },
            { offset: 1, color: "#fe9a8b03" },
          ]),
        },
      },
      {
        name: "校核中",
        type: "line",
        symbolSize: 6,
        symbol: "circle",
        smooth: true,
        data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
        lineStyle: { color: "rgb(24, 144, 255)" },
        itemStyle: { color: "rgb(24, 144, 255)", borderColor: "rgb(24, 144, 255)" },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgb(24, 144, 255)" },
            { offset: 1, color: "#9E87FF03" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                { offset: 0, color: "#9E87FF" },
                { offset: 0.4, color: "#9E87FF" },
                { offset: 0.5, color: "#fff" },
                { offset: 0.7, color: "#fff" },
                { offset: 0.8, color: "#fff" },
                { offset: 1, color: "#fff" },
              ],
            },
            borderColor: "#9E87FF",
            borderWidth: 2,
          },
        },
      },
	  {
        name: "已完成",
        type: "line",
        symbolSize: 6,
        symbol: "circle",
        smooth: true,
        data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
        lineStyle: { color: "#9E87FF" },
        itemStyle: { color: "#9E87FF", borderColor: "#9E87FF" },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#9E87FFb3" },
            { offset: 1, color: "#9E87FF03" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                { offset: 0, color: "#9E87FF" },
                { offset: 0.4, color: "#9E87FF" },
                { offset: 0.5, color: "#fff" },
                { offset: 0.7, color: "#fff" },
                { offset: 0.8, color: "#fff" },
                { offset: 1, color: "#fff" },
              ],
            },
            borderColor: "#9E87FF",
            borderWidth: 2,
          },
        },
      },
    ],
  })
// 折线图
const initLineChart = async () => {
  if (!state.global.dispose.some((b) => b === state.global.homeChartOne))
    state.global.homeChartOne.dispose();
 
  state.global.homeChartOne = markRaw(

    echarts.init(homeLineRef.value, state.charts.theme)
  );

  let res_equip_check0 = await GetEquipmentCountForState({equip_check:0})
  let res_equip_check10 = await GetEquipmentCountForState({equip_check:10})
  let res_equip_check30 = await GetEquipmentCountForState({equip_check:30})
 
  let arr_equip_check0= []
  let arr_equip_check10= []
  let arr_equip_check30= []
  for(let i = 0;i<12;i++){
	for(let a =0;a<3;a++){
		res_equip_check0.forEach((item)=>{
      if((item.Month) -1 == i){
           arr_equip_check0[i] = item.num
	  }
	})
	res_equip_check10.forEach((item)=>{
      if((item.Month) -1 == i){
           arr_equip_check10[i] = item.num
	  }
	})
	res_equip_check30.forEach((item)=>{
      if((item.Month) -1 == i){
           arr_equip_check30[i] = item.num
	  }
	})
	arr_equip_check0.push(0)
	arr_equip_check10.push(0)
	arr_equip_check30.push(0)
	}
	
  }
  optionsR.value.series[0].data = arr_equip_check0
  optionsR.value.series[1].data = arr_equip_check10
  optionsR.value.series[2].data = arr_equip_check30
 
  state.global.homeChartOne.setOption(optionsR.value);
  state.myCharts.push(state.global.homeChartOne);
};
// 饼图
const initPieChart = () => {
  if (!state.global.dispose.some((b) => b === state.global.homeChartTwo))
    state.global.homeChartTwo.dispose();
  state.global.homeChartTwo = markRaw(
    echarts.init(homePieRef.value, state.charts.theme)
  );
  var getname = [
    "房屋及结构物",
    "专用设备",
    "通用设备",
    "文物和陈列品",
    "图书、档案",
  ];
  var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
  var data = [];
  for (var i = 0; i < getname.length; i++) {
    data.push({ name: getname[i], value: getvalue[i] });
  }
  const colorList = ["#51A3FC", "#36C78B", "#FEC279", "#968AF5", "#E790E8"];
  const option = {
    backgroundColor: state.charts.bgColor,
    title: {
      text: "房屋建筑工程",
      x: "left",
      textStyle: { fontSize: "15", color: state.charts.color },
    },
    tooltip: { trigger: "item", formatter: "{b} <br/> {c}%" },
    graphic: {
      elements: [
        {
          type: "image",
          z: -1,
          style: {
            image: themeConfig.value.isIsDark
              ? ""
              : "",
            width: 230,
            height: 230,
          },
          left: "16.5%",
          top: "center",
        },
      ],
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: "0%",
      left: "65%",
      top: "center",
      itemWidth: 14,
      itemHeight: 14,
      data: getname,
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            fontWeight: 400,
            width: 200,
            height: 35,
            padding: [0, 0, 0, 60],
            color: state.charts.color,
          },
          rate: {
            fontSize: 15,
            fontWeight: 500,
            height: 35,
            width: 40,
            padding: [0, 0, 0, 30],
            color: state.charts.color,
          },
        },
      },
    },
    series: [
      {
        type: "pie",
        radius: ["82", themeConfig.value.isIsDark ? "50" : "102"],
        center: ["32%", "50%"],
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
        label: { show: false },
        labelLine: { show: false },
        data: data,
      },
    ],
  };
  state.global.homeChartTwo.setOption(option);
  state.myCharts.push(state.global.homeChartTwo);
};



let read_is =async () => {
  await ModifyNewProjectNoticeState({user_count:JSON.parse(localStorage.getItem("userMessage")).user_account})
  dioNotices.value = false
}


// 柱状图
const initBarChart = async () => {
  if (!state.global.dispose.some((b) => b === state.global.homeCharThree))
    state.global.homeCharThree.dispose();
  state.global.homeCharThree = markRaw(
    echarts.init(homeBarRef.value, state.charts.theme)
  );
  let resArr = await GetUnfinishedWorkDatas();
  
  if (resArr.length > 0) {
    let res = []
    resArr.forEach(v=>{
       if(v.user_group=='设备一组'){
        res[0]=v
       }
      else if(v.user_group=='设备二组'){
        res[1]=v
       }else{
        res[2]=v
       }
    })
   
    Goption.value.legend.data = [...res.map((v) => v.user_group), "总数"];
    let totalArr = [];

    res.forEach((v, i) => {
      Goption.value.series[i].name = res[i].user_group;
      let arr = Object.values(v);
      arr.splice(0, 1);
      totalArr.push(arr);
      Goption.value.series[i].data = arr;
    });

    let totalArrs = [];
    Goption.value.xAxis[0].data.forEach((v, i) => {
      let sum = 0;
      totalArr.forEach((item) => {
		
        sum += item[i];
		
      });
      totalArrs.push(sum);
    });

	Goption.value.series[3].data = totalArrs

  }

  state.global.homeCharThree.setOption(Goption.value);
  state.myCharts.push(state.global.homeCharThree);
};

const Goption = ref({
  backgroundColor: state.charts.bgColor,
  title: {
    text: "各组未完成工作量",
    x: "left",
    textStyle: { fontSize: "15", color: state.charts.color },
  },
  tooltip: { trigger: "axis" },
  legend: { data: ["数量", "回温", "回温1", "总数"], right: 0 },
  grid: { top: 70, right: 0, bottom: 30, left: 80 },
  xAxis: [
    {
      type: "category",
      data: [
        "设计未完成工程图",
        "设计未完成施工图",
        "校核未完成工程图",
        "校核未完成施工图",
        "审核未完成工程图",
        "审核未完成施工图",
      ],
      boundaryGap: true,
      axisTick: { show: false },
    },
  ],
  yAxis: [
    {
      name: "数量",
      nameLocation: "middle",
      nameTextStyle: { padding: [3, 4, 50, 6] },
      splitLine: {
        show: true,
        lineStyle: { type: "dashed", color: "#f5f5f5" },
      },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: state.charts.color, formatter: "{value} " },
    },
  ],
  series: [
    {
      name: "数量",
      type: "line",
      smooth: true,
      showSymbol: true,
      // 矢量画五角星
      symbol: "path://M150 0 L80 175 L250 75 L50 75 L220 175 Z",
      symbolSize: 12,
      yAxisIndex: 0,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(250,180,101,0.3)" },
          { offset: 1, color: "rgba(250,180,101,0)" },
        ]),
        shadowColor: "rgba(250,180,101,0.2)",
        shadowBlur: 20,
      },
      itemStyle: { color: "#FF8000" },
      // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
      data: [
        { value: 1, stationName: "s1" },
        { value: 3, stationName: "s2" },
        { value: 4, stationName: "s3" },
        { value: 9, stationName: "s4" },
        { value: 3, stationName: "s5" },
        { value: 2, stationName: "s6" },
      ],
    },
    {
      name: "回温",
      type: "line",
      smooth: true,
      showSymbol: true,
      symbol: "emptyCircle",
      symbolSize: 12,
      yAxisIndex: 0,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          1,
          1,
          [
            { offset: 0, color: "rgba(199, 237, 250,0.5)" },
            { offset: 1, color: "rgba(199, 237, 250,0.2)" },
          ],
          false
        ),
      },
      itemStyle: {
        color: "rgb(24, 144, 255)",
      },
      data: [
        { value: 31, stationName: "s1" },
        { value: 36, stationName: "s2" },
        { value: 54, stationName: "s3" },
        { value: 24, stationName: "s4" },
        { value: 73, stationName: "s5" },
        { value: 22, stationName: "s6" },
      ],
    },
    {
      name: "回温1",
      type: "line",
      smooth: true,
      showSymbol: true,
      symbol: "emptyCircle",
      symbolSize: 12,
      yAxisIndex: 0,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: "rgba(199, 237, 250,0.5)" },
            { offset: 1, color: "rgba(199, 237, 250,0.2)" },
          ],
          false
        ),
      },
      itemStyle: {
        color: "#3bbc86",
      },
      data: [
        { value: 31, stationName: "s1" },
        { value: 36, stationName: "s2" },
        { value: 54, stationName: "s3" },
        { value: 24, stationName: "s4" },
        { value: 73, stationName: "s5" },
        { value: 22, stationName: "s6" },
      ],
    },
    {
      name: "总数",
      type: "bar",
      barWidth: 30,
      yAxisIndex: 0,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(108,80,243,0.3)" },
          { offset: 1, color: "rgba(108,80,243,0)" },
        ]),
        //柱状图圆角
        borderRadius: [30, 30, 0, 0],
      },
      data: [
        { value: 11, stationName: "s1" },
        { value: 34, stationName: "s2" },
        { value: 54, stationName: "s3" },
        { value: 39, stationName: "s4" },
        { value: 63, stationName: "s5" },
        { value: 24, stationName: "s6" },
      ],
    },
  ],
});

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      setTimeout(() => {
        state.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener("resize", initEchartsResizeFun);
};

let dioNotices = ref(false)
let dioNoticesData = ref([])
let GetNewProjiectNoticeStateData = async(data) => {
  let res = await GetNewProjiectNoticeState(data)
 
  if(res.length>0){
    dioNotices.value = true
    dioNoticesData.value = res
  }

}

// 页面加载时
onMounted(async () => {
  
  GetNewProjiectNoticeStateData({
    user_count:JSON.parse(localStorage.getItem("userMessage")).user_account
  })
  initEchartsResize();
 
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
  initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
  () => isTagsViewCurrenFull.value,
  () => {
    initEchartsResizeFun();
  }
);

// 监听 pinia 中是否开启深色主题
watch(
  () => themeConfig.value.isIsDark,
  (isIsDark) => {
    nextTick(() => {
      state.charts.theme = isIsDark ? "dark" : "";
      state.charts.bgColor = isIsDark ? "transparent" : "";
      state.charts.color = isIsDark ? "#dadada" : "#303133";
      setTimeout(() => {
        initLineChart();
      }, 500);
   
      setTimeout(() => {
        initBarChart();
      }, 700);
    });
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
  overflow: hidden;
  .home-card-one,
  .home-card-two,
  .home-card-three {
    .home-card-item {
      width: 100%;

      border-radius: 4px;
      transition: all ease 0.3s;

      overflow: hidden;
      background: var(--el-color-white);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);
      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }
      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;
        i {
          color: var(--el-text-color-placeholder);
        }
      }
      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }
  .home-card-one {
    @for $i from 0 through 3 {
      .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/4) + s;
      }
    }
  }
  .home-card-two,
  .home-card-three {
    .home-card-item {
      height: 400px;
      width: 100%;
      overflow: hidden;
      .home-monitor {
        height: 100%;
        .flex-warp-item {
          width: 25%;
          height: 111px;
          display: flex;
          .flex-warp-item-box {
            margin: auto;
            text-align: center;
            color: var(--el-text-color-primary);
            display: flex;
            border-radius: 5px;
            background: var(--next-bg-color);
            cursor: pointer;
            transition: all 0.3s ease;
            &:hover {
              background: var(--el-color-primary-light-9);
              transition: all 0.3s ease;
            }
          }
          @for $i from 0 through $homeNavLengh {
            .home-animation#{$i} {
              opacity: 0;
              animation-name: error-num;
              animation-duration: 0.5s;
              animation-fill-mode: forwards;
              animation-delay: calc($i/10) + s;
            }
          }
        }
      }
    }
  }
}

::v-deep(.el-table__header){
  display: none;
}





.upgrade-dialog {
	:deep(.el-dialog) {
		.el-dialog__body {
			padding: 0 !important;
		}
		.el-dialog__header {
			display: none !important;
		}
		.upgrade-title {
			text-align: center;
			height: 130px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				background-color: var(--el-color-primary-light-1);
				width: 130%;
				height: 130px;
				border-bottom-left-radius: 100%;
				border-bottom-right-radius: 100%;
			}
			.upgrade-title-warp {
				z-index: 1;
				position: relative;
				.upgrade-title-warp-txt {
					color: var(--next-color-white);
					font-size: 22px;
					letter-spacing: 3px;
				}
				.upgrade-title-warp-version {
					color: var(--next-color-white);
					background-color: var(--el-color-primary-light-4);
					font-size: 12px;
					position: absolute;
					display: flex;
					top: -2px;
					right: -50px;
					padding: 2px 4px;
					border-radius: 2px;
				}
			}
		}
		.upgrade-content {
			padding: 20px;
			line-height: 22px;
			.upgrade-content-desc {
				color: var(--el-color-info-light-5);
				font-size: 12px;
			}
		}
		.upgrade-btn {
			
			display: flex;
		  justify-content: flex-end;
			padding: 15px 20px;
			.el-button {
				width: 100%;
			}
		}
	}
}

::v-deep(.el-dialog__title){
    font-weight: bold;
  }
::v-deep(.notice_table){
  
  padding: 0  0  20px 0;
  .el-table__header {
     display: inherit;

  }
}

</style>
